<template>
	<modal-container class="wide-modal" v-el:modal :title="title()" theme="primary">
	<style>
		.fluid-left {
			width: 360px;
			float: left;
		}
		.fluid-right {
			 padding-left: 380px;
		}		
		.fluid-right .box-container {
			 float: left;
			 width: 100%;
		}
		.fluid-left .img-responsive {
			width: 150px;
			height: 100px;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			background-size: cover;
			background-position: center center;			
		}
		.hover {
			cursor: pointer;
		}
		.main-area.active {
/* background-color: #00c0ef;*/
			background-color:#00acd6;
			color: #fff;
		}
		.h4 {
			line-height:32px;
			vertical-align:middle;
			margin:0;
			text-align:center;
			white-space:nowrap;
			display: inline-block;
   		width: 100%;		
			overflow:hidden;
			text-overflow:ellipsis;			
		}
	</style>
		<div class="modal-body">		 
		  <div class="clearfix">
		  	<div class="fluid-left">
					<div class="frame-items clearfix">
					   <photo-item class="hover" cover="6" v-for="(index,item) in iArray" @click="select(item,index)">	
					     <div class="main-area" :class="{'active':item.active}">
									<div  v-if="item.content_source_url.trim()!=''"  class="img-responsive" :style="{ 'background-image': 'url(' + item.content_source_url + ')' }"></div>						
									<div  v-else class="placeholder-cover img-responsive">
									</div>
														
									<div class="h4">{{item.title}}</div>
									<div class="text-center" style="padding-bottom:6px" v-if="iArray.length>1">
										<v-button theme="warning" @click.stop="move(item)">
											<i class="fa fa-angle-double-up fa-1x"></i>
											上移
										</v-button>									
										<v-button theme="danger" @click.stop="remove(item)">
											<i class="fa fa-remove fa-1x"></i>
											删除
										</v-button>									
									</div>															     	
					     </div>			 
								<v-button block @click="setCover(index)">
									设置封面图片
								</v-button>							      
						</photo-item>
					</div>
					<div class="divide-20 border-top"></div>
					<div class="col-sm-12">
						<v-button theme="primary" block @click="create">新增图文</v-button>
					</div>
					<div class="divide-20"></div>
		  	</div>
				<div class="fluid-right">
					 <div class="box-container">					 
						<div class="tab-content">
					
							<!-- item -->
							 <div>
										<div class="row">
											<form-input :title="titlestr" :maxlength="12" name="title" :value.sync="item.title"></form-input>
											<form-input title="作者" :maxlength="12" name="author" :value.sync="item.author"></form-input>
											<form-group title="正文"></form-group>														  	
										</div>
										<app-note v-ref:note :content.sync="item.content"></app-note>
										<div class="row" style="margin-top:-10px;margin-bottom:15px">
											<form-group title="摘要">
											</form-group>	
											<div class="col-sm-12">
												<textarea class="form-control " name="digest" rows="2" v-model="item.digest" @keyup="size"></textarea>
												<div class="divide-10"></div>
												<div class="text-right" style="color:#777">
													{{hintSize}}/120
												</div>																											
											</div>																			
										</div>									
										<div class="text-right">
											<v-button theme="primary" @click="submit">保存</v-button>
											<v-button  data-dismiss="modal" @click="cancel">取消</v-button>
										</div>	
							 </div>	
							 <!-- /item -->					 
						
						</div>					 				 	
					 </div>					
				</div>
		  </div>
		</div>	
	</modal-container>			
	<app-confirm v-ref:confirm></app-confirm>	
</template>

<style>
.wide-modal .modal-dialog {
	width: 80% !important;
	min-width: 600px;
	max-width: 1200px;
}
</style>	
	
<script>
	
	import Note from 'pages/partial/summernote.vue';
	import Confirm from 'pages/partial/photo-from.vue';
	
	export default {
		components: {
			'app-note': Note,
			'app-confirm': Confirm
		},
		data: () => ({
			picId: [],
			picUrl: [],
			isEdit: false,
			editId:{},
			hintSize:"0",
			//ie9 dog
			titlestr: "标题"
		}),		
		props: {
			iArray: {
				type: Array,
				twoWay: true,
				default:function() {
						return [];
				}				
			},
			item: {
				type: Object,
				twoWay: true,
				default:function() {
						return {};
				}				
			}								
		},
		events: {
			iAarryPush(arr) {
				let result = []
				if(this.iArray&&this.iArray.length>0) {
					 result = this.iArray.concat(arr);
				} else {
					 result = arr;
				}								
				this.$set("iArray",result);
			},
			setItemCover(index,arg) {
				//将封面信息保存
				this.iArray[index].show_cover_pic = 1;
				this.iArray[index].content_source_url = arg.url;
				this.iArray[index].thumb_media_id = arg.id.media;
				
				this.picId[index] = arg.picId;
				this.picUrl[index] = arg.url;				
			}
		},
	 computed: {
		 hintSize: function() {
			 if(this.item.hasOwnProperty("digest")) {
				 return this.item.digest.length;
			 } else {
				 return "0";
			 }
			 
		 }
	 },
		methods: {
			title() {
				return (this.isEdit)?"编辑图文":"新建图文";
			},
			//限制摘要字数
			size(e) {
				let str = e.target.value;				
			  let size = str.length;
				let result = '';
				if(size>=120) {
					 result = str.substring(0,120)
				} else {
					 result = str
				}
				this.item.digest = result;
				//e.target.value = result;
			},
			init() {				
				this.$set("isEdit",false);
				this.$set("iArray",[]);
				this.create();
				$(this.$els.modal).modal("show");
				this.$refs.note.reset()
			},
			cancel() {
				this.$refs.note.reset();
				//$(this.$els.modal).modal("hide");
			},
			editInit(arr,id,picIdArr,picUrlArr) {			
				this.$set("editId",id);
				//id.media id.mchtId
				this.$set("isEdit",true);
				this.$set("iArray",arr);	
				$(this.$els.modal).modal("show");	
				this.$set("item",this.iArray[0]);	
				this.$nextTick(() => {
					this.$refs.note.change()
				});
				
				this.$set("picId",picIdArr);
				this.$set("picUrl",picUrlArr);				
			},
			submit() {
				let data = {}				
				//console.log(JSON.stringify(this.iArray));
				let articles = {};
				let arr = _.cloneDeep(this.iArray);
				let stop = false;
				for (let i=0;i<arr.length;i++) {
					let player = arr[i];
					if(player.title === "") {
						let message = {
							title: "操作提示",
							content: "标题不能为空"
						}
						Midway.alert(message);
						stop = true;
						break;					
					}
					
					if(player.author === "") {
						let message = {
							title: "操作提示",
							content: "作者不能为空"
						}
						Midway.alert(message);
						stop = true;
						break;					
					}	
					
					if(player.content === "") {
						let message = {
							title: "操作提示",
							content: "内容不能为空"
						}
						Midway.alert(message);
						stop = true;
						break;
					} else {
						let str = player.content;
						let html = 
						`<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head>
						<body>
						${str}
						</body>
						</html>`
						player.content = html;				
					}		
																
					if(player.digest === "") {
						let message = {
							title: "操作提示",
							content: "摘要不能为空"
						}
						Midway.alert(message);
						stop = true;
						break;					
					}						
				}
					
				if(stop) {
					return false;
				}
				
				arr = arr.map(player => {
					delete player.active;																			
					player.content_source_url = "CONTENT_SOURCE_URL";					
					return player;
				})				

				articles.articles = arr;
				data.articles = JSON.stringify(articles);
				data.name = arr[0].title;
				data.des = arr[0].digest;

				data.mchtId = localStorage.getItem('get_id');		
				let picId = (this.picId).join(",");
			  let picUrl = (this.picUrl).join(",");				
				data.picId = picId;
				data.picUrl = picUrl;				
				//console.log(JSON.stringify(data));			

				if(this.isEdit) {					
					//update			
					data.media = this.editId.media;
					data.mchtIdFlag = this.editId.mchtId;
					this.$post({
							url: '/api/v1' + projectName_Url + '/wechat/media/updateNews.html',
							data
					}).then( response => {	
						let message = {
							title:"操作提示",
							content:"修改图文成功"
						}
						Midway.alert(message);
						this.$dispatch('edit-done');
						$(this.$els.modal).modal("hide");						
					}, response => {
					});									
				} else {
					//insert
					this.$post({
							url: '/api/v1' + projectName_Url + '/wechat/media/upNews.html',
							data
					}).then( response => {	
						let message = {
							title:"操作提示",
							content:"保存图文成功"
						}
						Midway.alert(message);
						this.$dispatch('upload-done');
						let config = response.content.fodderInf;
						this.$dispatch('setResource',config);						
						$(this.$els.modal).modal("hide");
					}, response => {
					});							
				}		
				//$(this.$els.modal).modal("hide");
			},
			select(item,index) {
				this.$set("item",item);
				this.$nextTick(() => {
					this.$refs.note.change();
				});				
				let key = index;
				this.iArray.forEach( (element,index) => {
					if(index == key) {
						element.active = true
					} else {
					  element.active = false;						
					}					
				})
				this.$refs.note.change();
			},
			reject() {
				$(this.$els.modal).modal("hide");
			},
			create() {
				//新建图文

				let articles = {
					title: "新建图文",
					author: "",
					content:"",
					active: false,
        /* 默认封面图 */					
					content_source_url: "/ConsolePIC/tmp/image/a.jpg",
					thumb_media_id: "w0BLoY6LV7Xoa36aiy_gjYcPHrMIN9P6I5whDZ0FX_Y",					
					show_cover_pic: 0,
					digest:""
				};			
				if(!this.iArray.length>0) {
					articles.active = true;
				}
				this.iArray.push(articles);
				this.$set("item",this.iArray[0]);
			},
			setCover(index) {
				//设封面
				this.$refs.confirm.$set("itemIndex",index);
				this.$refs.confirm.init();
			},
			remove(item) {
				this.iArray.$remove(item)				
			},
			move(item) {
				let arr = this.iArray;
				let index = arr.indexOf(item);
				if(index == 0) {
					return false;
				} else {
					let container = arr[index-1];
					arr.splice(index-1,1,item);
					arr.splice(index,1,container);
				}
			}
		},
		ready() {
			//this.create();	
			let self = this;
//			$(this.$els.modal).on('hidden.bs.modal', function () {
//					self.$refs.note.reset()				 
//			})				
			$(this.$els.modal).find("button.close").first().click(function(){
				self.$refs.note.reset()					
			})
			
		}
	}
</script>